<template>
	<view class="likePage">
		<view class="pageHeader">
			<view class="headContent">
				<view class="backBtn" @click="adminShow">
					{{administrationShow?'取消':'编辑'}}
				</view>
				<view class="headContentBack1"></view>
				<view class="headContentBack2"></view>
				<p>事事记</p>
			</view>
		</view>
		<scroll-view scroll-y :show-scrollbar="false" class="pageContent">
			<view class="thingsPrompt" v-if="thingsList.length === 0">好像还没有很重要的事情哦~</view>
			<view class="thingItem" v-for="item in thingsList" :key="item.id" @click="openThingData(item)">
				<view class="itemTitle">{{item.title}}</view>
				<view class="itemDay">
					<view v-if="item.dayNum !== 0 && !administrationShow" class="itemDayStr">{{item.daynow === 0?'还有':'已经'}}</view>
					<view v-if="item.dayNum !== 0 && !administrationShow" class="itemDayNum">{{item.dayNum}}</view>
					<view v-if="!administrationShow" class="itemDayUnit">{{item.dayNum === 0?'今天':'天'}}</view>
					<view :class="{administration:true,administrationShow:administrationShow}">
						<view v-if="administrationShow" style="background-color: #40d269 ;" @click.stop="goTopItem(item)">置顶</view>
						<view v-if="administrationShow" style="background-color: #f85255 ;" @click.stop="deleteItem(item)">删除</view>
						<view v-if="administrationShow" style="background-color: #1793ff ;" @click.stop="thingToggleOpen(item)">修改</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<uni-popup ref="timePopup" :is-mask-click="false" style="position: relative;z-index: 999999999;">
			<view class="popup-content" style="position: relative;z-index: 999999999;">
				<view class="timePopup">
					<view class="timeHead">
						<view @click="thingChoose" style="color: #a0a0a0;">取消</view>
						<view @click="thingToggleClose" style="color: #ea5514;">确定</view>
					</view>
					<view class="timeContent">
						<view class="thingTime">
							<uni-datetime-picker type="date" :clear-icon="false" v-model="chooseTime"/>
						</view>
						<view class="thingTitle">
							<view class="contentTitle">
								<view class="beginIcon"></view>事件标题
							</view>
							<view class="titleContent">
								<textarea v-model="title" maxlength="10" placeholder="请输入事件标题(10字内)" style="width: 100%;height: 100%;font-size: 28rpx;letter-spacing: 2rpx;"/>
							</view>
						</view>
						<view class="thingContent">
							<view class="contentTitle">
								<view class="beginIcon"></view>详情描述
							</view>
							<view class="detailContent">
								<textarea v-model="detail" maxlength="200" placeholder="请输入具体描述(0-200)" style="width: 100%;height: 100%;font-size: 28rpx;letter-spacing: 2rpx;"/>
							</view>
						</view>
						<view class="btn">
							<!-- <view class="btn1" @click="deleteItem">删除</view> -->
							<view class="btn2" @click="thingToggleClose">确认修改</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<view class="tipBack" v-if="dataShow" @click="closeThingData"></view>
		<view class="thingTip" v-if="dataShow">
			<view class="tipClose" @click="closeThingData">×</view>
			<view class="tipHeader">{{thingItemData.title}}</view>
			<view class="tipDate">
				<view>{{thingItemData.time}}</view>
				<view>{{thingItemData.dayNum === 0?'':(thingItemData.daynow === 0?'还有':'已经')}}
				{{thingItemData.dayNum === 0?'':thingItemData.dayNum}}{{thingItemData.dayNum === 0?'今天':'天'}}</view>
			</view>
			<view class="tipContent">
				{{thingItemData.detail}}
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
		    return {
				thingsJson: {},
		        thingsList: [],
				itemId: null,
				chooseTime: '', //记事时间
				title: '', //标题
				detail: '', //详情
				administrationShow: false,
				dataShow: false,
				thingItemData:{}
			}
		},
		mounted() {
			this.getThingData()
		},
		methods: {
			goTopItem(data){
				let that = this
				uni.showModal({
					title: '置顶提示',
					content: '确定置顶事件：' + data.title + ' ?',
					success: function (res) {
						if (res.confirm) {
							delete that.thingsJson[data.id]
							let newDataJson = {}
							let firstObj = data
							firstObj.id = 1
							newDataJson[firstObj.id] = firstObj
							let i = 1
							Object.keys(that.thingsJson).sort().forEach(item => {
								i++
								if(that.thingsJson[item]){
									let newObj = that.thingsJson[item]
									newObj.id = i
									newDataJson[newObj.id] = newObj
								}
							})
							that.thingsJson = newDataJson
							uni.setStorageSync('thingsJosn', JSON.stringify(that.thingsJson));
							that.getThingData()
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 1000
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消操作',
								icon: 'none',
								duration: 1000
							})
							return
						}
					}
				});
			},
			openThingData(item){
				if(this.administrationShow){
					return
				}
				this.dataShow = true
				this.thingItemData = item
			},
			closeThingData(){
				this.dataShow = false
			},
			adminShow(){
				this.administrationShow = !this.administrationShow
			},
			deleteItem(data){
				let that = this
				uni.showModal({
					title: '删除提示',
					content: '确定删除事件：' + data.title + ' ?',
					success: function (res) {
						if (res.confirm) {
							delete that.thingsJson[data.id]
							uni.setStorageSync('thingsJosn', JSON.stringify(that.thingsJson));
							that.getThingData()
							that.$refs.timePopup.close()
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 1000
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消操作',
								icon: 'none',
								duration: 1000
							})
							return
						}
					}
				});
			},
			thingChoose() {
				uni.showToast({
					title: '取消修改',
					icon: 'none',
					duration: 1000
				})
				this.$refs.timePopup.close()
			},
			thingToggleOpen(data) {
				this.itemId = data.id
				this.chooseTime = data.time
				this.title = data.title
				this.detail = data.detail
				this.$refs.timePopup.open('bottom')
			},
			thingToggleClose() {
				let title = this.title.replace(/\s*/g,"")
				let detail = this.detail.replace(/\s*/g,"")
				let obj = {id:this.itemId,time:this.chooseTime,title:title,detail:detail}
				this.thingsJson[this.itemId] = obj
				uni.setStorageSync('thingsJosn', JSON.stringify(this.thingsJson));
				this.getThingData()
				this.adminShow()
				this.$refs.timePopup.close()
				uni.showToast({
					title: '修改成功',
					icon: 'none',
					duration: 1000
				})
			},
			getThingData(){
				let that = this
				this.thingsList = []
				let value = uni.getStorageSync('thingsJosn');
				if (value) {
					let thingsJosn = JSON.parse(value)
					this.thingsJson = thingsJosn
					Object.keys(thingsJosn).sort().forEach(function(item){
					    that.thingsList.push(thingsJosn[item])
					})
					let timeElapsed = Date.now();
					let today = new Date(timeElapsed);
					today = today.toISOString()
					today = today.substr(0,10)
					for(let i = 0; i < this.thingsList.length; i++){
						if(this.getDaysBetween(this.thingsList[i].time,today) > 0){
							this.thingsList[i].daynow = 0
							this.thingsList[i].dayNum = this.getDaysBetween(this.thingsList[i].time,today)
						}else{
							this.thingsList[i].daynow = 1
							this.thingsList[i].dayNum = 0 - this.getDaysBetween(this.thingsList[i].time,today)
						}
					}
				}
			},
			getDaysBetween(date1,date2){
			    var startDate = Date.parse(date1);
			    var endDate = Date.parse(date2);
			    if (startDate > endDate){
			        let temp = startDate
					startDate = endDate
					endDate = temp
					var days=(endDate - startDate)/(1*24*60*60*1000);
					return days;
			    }
			    if (startDate==endDate){
			        return 0;
			    }
			    var days=(endDate - startDate)/(1*24*60*60*1000);
				days = 0 - Number(days)
			    return days;
			},
		}
	}
</script>

<style>
	.likePage{
		position: relative;
		top: 0;
		height: 100vh;
		width: 100%;
		background-color: rgba(245, 245, 245, 0.9);
	}
	
	.pageHeader{
		width: 100%;
		height: 11vh;
		position: relative;
		background:linear-gradient(to right ,rgba(234, 85, 20, 0.9),rgba(234, 85, 20, 0.4));
		overflow: hidden;
	}
	
	.pageHeader .headContent{
		width: 100%;
		height: 6vh;
		margin-top: 5vh;
		position: absolute;
		text-align: center;
		font-size: 34rpx;
		line-height: 7vh;
		letter-spacing: 1rpx;
		font-weight: 500;
		color: rgba(238, 234, 220, 1.0);
	}
	
	.pageHeader .headContent > p{
		position: absolute;
		z-index: 20;
		width: 100%;
		text-align: center;
	}
	
	.pageHeader .headContent .backBtn{
		height: 50rpx;
		width: 90rpx;
		line-height: 50rpx;
		position: absolute;
		z-index: 30;
		margin-top: 2vh;
		left: 20rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(233, 233, 233, 1.0);
		border: 2rpx solid rgba(255, 221, 165, 1.0);
		border-radius: 8rpx;
		background-color: rgba(234, 162, 80, 1);
	}
	
	.pageHeader .headContent .headContentBack1{
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: -7.5vh;
		left: -35rpx;
		background-color: rgba(234, 85, 20, 0.3);
	}
	
	.pageHeader .headContent .headContentBack2{
		width: 500rpx;
		height: 500rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: 1vh;
		left: 20%;
		background-color: rgba(234, 85, 20, 0.5);
	}
	
	.pageContent {
		width: 100%;
		height: calc(85vh - 82rpx);
		position: relative;
		top: 0;
		z-index: 100;
	}
	
	.thingsPrompt{
		width: 750rpx;
		text-align: center;
		margin: 50rpx auto;
		font-size: 32rpx;
		color: rgba(234, 85, 20, 0.6);
	}
	
	.thingItem{
		width: 730rpx;
		margin: 20rpx 10rpx;
		box-sizing: border-box;
		height: 90rpx;
		border-radius: 10rpx;
		box-shadow: 4px 4px 7px rgba(234, 85, 20, 0.3);
		font-size: 30rpx;
		/* border:2rpx solid rgba(234, 85, 20, 0.7); */
		display: flex;
		justify-content: space-between;
		background-color: rgba(255, 255, 255, 1);
		overflow: hidden;
	}
	
	.thingItem .itemTitle{
		height: 90rpx;
		font-size: 28rpx;
		line-height: 90rpx;
		margin-left: 16rpx;
		color: rgba(234, 85, 20, 1);
	}
	
	.thingItem .itemDay{
		height: 90rpx;
		line-height: 90rpx;
		font-size: 28rpx;
		display: flex;
	}
	
	.thingItem .itemDay .itemDayStr{
		height: 90rpx;
		color: rgba(234, 85, 20, 1);
	}
	
	.thingItem .itemDay .itemDayNum{
		height: 90rpx;
		min-width: 50rpx;
		padding:0 10rpx;
		text-align: center;
		color: rgba(234, 85, 20, 1);
		font-weight: 600;
		font-size: 34rpx;
	}
	
	.thingItem .itemDay .itemDayUnit{
		height: 90rpx;
		font-size: 28rpx;
		font-weight: 500;
		text-align: center;
		padding: 0 16rpx;
		border-top-right-radius: 9rpx;
		border-bottom-right-radius: 9rpx;
		box-sizing: border-box;
		background-color: rgba(234, 85, 20, 0.8);
		color: rgba(238, 234, 220, 1.0);
	}
	
	.timePopup {
		width: 100%;
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
	}
	
	.timePopup .timeHead {
		height: 70rpx;
		width: 100%;
		border-bottom: 1rpx solid #efefef;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.timePopup .timeHead>view {
		/* width: 20%; */
		height: 70rpx;
		margin: 0 20rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		letter-spacing: 2rpx;
	}
	
	.timePopup .timeContent {
		width: 100%;
		border-bottom: 1rpx solid #efefef;
	}
	
	.thingTime{
		position: relative;
		width: 710rpx;
		margin: 20rpx;
		/* height: 100rpx; */
		border-radius: 12rpx;
		box-sizing: border-box;
		border: 2rpx solid rgba(234, 85, 20, 0.3);
		background: rgba(255, 255, 255, 1);
		overflow: hidden;
	}
	
	.thingTitle{
		position: relative;
		width: 710rpx;
		margin: 16rpx 20rpx;
		height: 200rpx;
		border-radius: 12rpx;
		box-sizing: border-box;
		border: 2rpx solid rgba(234, 85, 20, 0.3);
		background: rgba(255, 255, 255, 1);
		padding: 10rpx;
	}
	
	.thingContent{
		position: relative;
		width: 710rpx;
		margin: 16rpx 20rpx;
		height: 400rpx;
		border-radius: 12rpx;
		box-sizing: border-box;
		border: 2rpx solid rgba(234, 85, 20, 0.3);
		background: rgba(255, 255, 255, 1);
		padding: 10rpx;
	}
	
	.btn{
		width: 710rpx;
		margin: 50rpx 20rpx;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.btn1{
		width: 350rpx;
		height: 90rpx;
		border-radius: 10rpx;
		box-shadow: 0px 4px 7px rgba(234, 85, 20, 0.3);
		color: rgba(234, 85, 20, 0.7);
		font-size: 38rpx;
		text-align: center;
		letter-spacing: 16rpx;
		line-height: 90rpx;
		box-sizing: border-box;
		border:2rpx solid rgba(234, 85, 20, 0.7);
	}
	
	.btn2{
		width: 710rpx;
		height: 90rpx;
		border-radius: 10rpx;
		box-shadow: 0px 4px 7px rgba(234, 85, 20, 0.3);
		color: #ffffff;
		font-size: 38rpx;
		text-align: center;
		letter-spacing: 6rpx;
		line-height: 90rpx;
		box-sizing: border-box;
		background-color: rgba(234, 85, 20, 0.7);
	}
	
	.contentTitle{
		width: 690rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: rgba(120, 120, 120, 1);
	}
	
	.contentTitle .beginIcon{
		width: 6rpx;
		height: 28rpx;
		margin-right: 10rpx;
		border-radius: 8rpx;
		background-color: rgba(234, 85, 20, 0.9);
	}
	
	.titleContent{
		width: 690rpx;
		height: 130rpx;
		margin-top: 10rpx;
	}
	
	.detailContent{
		width: 690rpx;
		height: 330rpx;
		margin-top: 10rpx;
	}
	
	.administration{
		width: 0rpx;
		height: 90rpx;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		transition: all 0.5s ease;
	}
	
	.administrationShow{
		width: 360rpx;
		transition: all 0.5s ease;
	}
	
	.administration > view{
		height: 90rpx;
		width: 120rpx;
		text-align: center;
		letter-spacing: 2rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		color: rgba(250, 250, 250, 1);
	}
	
	.tipBack{
		position: fixed;
		top: 0;
		z-index: 9999999999;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.thingTip{
		position: fixed;
		top: 30vh;
		left: calc(50% - 275rpx);
		z-index: 99999999999;
		width: 550rpx;
		height: 500rpx;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
	}
	
	.thingTip .tipClose{
		position: relative;
		top: 4rpx;
		right: -556rpx;
		width: 50rpx;
		height: 50rpx;
		font-size: 46rpx;
		border-radius: 100%;
		text-align: center;
		line-height: 46rpx;
		border: 4rpx solid rgba(255, 255, 255, 1);
		color: rgba(255, 255, 255, 1);
	}
	
	.thingTip .tipHeader{
		position: absolute;
		top: 0rpx;
		box-sizing: border-box;
		width: 550rpx;
		height: 70rpx;
		background-color: rgba(234, 85, 20, 0.9);
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		letter-spacing: 2rpx;
		color: rgba(243, 243, 243, 1.0);
	}
	
	.thingTip .tipDate{
		position: relative;
		top: 20rpx;
		box-sizing: border-box;
		width: 530rpx;
		height: 60rpx;
		margin: 0 10rpx;
		border-radius: 10rpx;
		border: 1rpx solid rgba(234, 85, 20, 0.9);
		display: flex;
		justify-content: space-between;
	}
	
	.thingTip .tipDate > view{
		margin: 0 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: rgba(234, 85, 20, 1);
		font-size: 28rpx;
	}
	
	.thingTip .tipContent{
		position: relative;
		top: 30rpx;
		box-sizing: border-box;
		padding: 10rpx;
		width: 530rpx;
		height: 340rpx;
		margin: 0 10rpx;
		border-radius: 10rpx;
		border: 1rpx solid rgba(234, 85, 20, 0.9);
		color: rgba(234, 85, 20, 1);
		background-color: rgba(240, 240, 240, 1);
		font-size: 26rpx;
		line-height: 34rpx;
		overflow-y: scroll;
	}
</style>
